<template>
  <div>
    <KiFormDialog
      :show.sync="dialogVisible"
      :title="params.title"
      v-model="form"
      :submit="submit"
      :readonly="readonly"
      ref="formRef"
    >
      <template #el-form>
        <el-form-item label="选择商户" verify prop="merchantId">
          <!-- 新增时可修改 -->
          <el-input
            v-if="readonly || params.type == 'edit'"
            v-model="form.parentMchName"
            disabled
          ></el-input>
          <merchantSelect v-model="form.merchantId" v-else />
        </el-form-item>
        <el-form-item label="店铺名称" verify prop="name">
          <el-input
            v-model.trim="form.name"
            maxlength="45"
            placeholder="请输入店铺名称"
          ></el-input>
          <FormItemTip>
            店铺名称用作用户前端显示店铺信息展示，可更改为需要展示的店铺名称。
          </FormItemTip>
        </el-form-item>

        <el-form-item
          v-if="params.type != 'add'"
          label="店铺ID"
          prop="subMchId"
        >
          <el-input v-model.trim="form.subMchId" disabled></el-input>
        </el-form-item>

        <el-form-item label="店铺客服电话" prop="phone">
          <phoneList ref="phoneList" v-model="form.phone"></phoneList>
        </el-form-item>
        <el-form-item label="店铺联系人" verify prop="contracts">
          <el-input
            v-model.trim="form.contracts"
            maxlength="20"
            placeholder="请输入店铺联系人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="店铺联系人手机号" verify prop="contactPhone">
          <el-input
            v-model.trim="form.contactPhone"
            placeholder="请输入店铺联系人手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="店铺营业时间" verify prop="businessTime">
          <el-input
            v-model="form.businessTime"
            maxlength="200"
            placeholder="请输入店铺营业时间"
          ></el-input>
        </el-form-item>

        <!-- 行政区 -->
        <el-form-item label="店铺地址" prop="placeCode" verify>
          <AllRegionSelect ref="RegionSelect" v-model="form.placeCode" />
        </el-form-item>

        <el-form-item label="详情地址" prop="address" verify>
          <el-input
            v-model="form.address"
            clearable
            maxlength="100"
            show-word-limit
            placeholder="请选择详细位置"
          >
            <el-button slot="prepend" @click="showCoordPicker = true">
              地图选点
            </el-button>
          </el-input>
          <CoordPicker
            :show.sync="showCoordPicker"
            :lng.sync="form.longitude"
            :lat.sync="form.latitude"
            :address.sync="form.address"
            :city="$refs.RegionSelect && $refs.RegionSelect.mLabel"
          />
        </el-form-item>
        <div class="flex">
          <el-form-item prop="longitude" verify class="flex-1">
            <el-input v-model="form.longitude" placeholder="请输入经度">
              <template slot="prepend">经度</template>
            </el-input>
          </el-form-item>
          <el-form-item prop="latitude" verify class="flex-1">
            <el-input v-model="form.latitude" placeholder="请输入纬度">
              <template slot="prepend">纬度</template>
            </el-input>
          </el-form-item>
        </div>

        <el-form-item label="店铺资质" verify prop="license">
          <Imgpond :count="10" v-model="form.license" value-type="string" />
        </el-form-item>
        <el-form-item label="logo" prop="logo">
          <Imgpond :count="1" v-model="form.logo" fixed-ratio="1/1" />
        </el-form-item>
        <el-form-item label="公众号名称" prop="weChatName" :rules="requireName">
          <el-input
            v-model="form.weChatName"
            placeholder="请输入公众号名称"
            maxlength="20"
            show-word-limit
          ></el-input>
          <FormItemTip>
            如果商户有公众号微商城，可以配置公众号信息，会在商品详情中显示，可以给店铺单独配置公众号信息
          </FormItemTip>
        </el-form-item>
        <el-form-item
          label="公众号二维码"
          prop="qrCodeUrl"
          :rules="requireCodeUrl"
        >
          <Imgpond :count="1" v-model="form.qrCodeUrl" />
        </el-form-item>
      </template>
    </KiFormDialog>
  </div>
</template>
<script>
import phoneList from './components/phoneList'
import merchantSelect from '@/components/merchantSelect'

export default {
  components: {
    phoneList,
    merchantSelect
  },
  props: ['areaList'],
  data() {
    let self = this
    const requireName = {
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (!value && self.form.qrCodeUrl) {
          callback(new Error('上传了公众号二维码，必须填写公众号名称'))
        }
        callback()
      }
    }
    const requireCodeUrl = {
      trigger: 'blur',
      validator: (rule, value, callback) => {
        if (!value && self.form.weChatName) {
          callback(new Error('填写了公众号名称，必须上传公众号二维码'))
        }
        callback()
      }
    }
    return {
      showCoordPicker: false,
      loading: false, //表单提交的loading
      form: {},
      dialogVisible: false,
      params: {}, //当前页面类型参数
      isUploading: false, //上传的loading
      requireName: requireName,
      requireCodeUrl: requireCodeUrl
    }
  },
  computed: {
    readonly() {
      return this.params.type === 'view'
    }
  },
  methods: {
    open(params) {
      // 重置表单
      const $form = this.$refs.form
      $form && $form.resetFields()

      this.params = params
      if (params.data) {
        this.form = params.data
      } else {
        //新增页面,重置表单
        this.form = {}
      }

      this.dialogVisible = true
    },
    submit() {
      // let flag = this.$refs["phoneList"].validatePhone();

      // if (!flag) {
      //   this.$swal({
      //     message: "请输入店铺客服电话",
      //     type: "warning",
      //   });
      //   return;
      // }

      this.loading = true
      if (this.params.type === 'add') {
        return this.$POST('/sot-admin-api/merchant/sub/createSubMerchant', {
          ...this.form,
          businessStatus: 0 //0：正常；1：停业, 新增的店铺默认营业状态为正常
        })
          .then((data) => {
            this.$swal.success('保存成功')
            this.dialogVisible = false
            this.$emit('save')
          })
          .finally(() => {
            this.loading = false
          })
      } else if (this.params.type === 'edit') {
        return this.$POST(
          '/sot-admin-api/merchant/sub/editSubMerchant',
          this.form
        )
          .then((data) => {
            this.$swal.success('保存成功')
            this.dialogVisible = false
            this.$emit('save')
          })
          .finally(() => {
            this.loading = false
          })
      }
    },
    addressValidtor(rule, value, callback) {
      if (!this.form.address && !this.form.longitude && !this.form.latitude) {
        callback(new Error('地址、经纬度都必填'))
      } else {
        callback()
      }
    },
    getMapInfo(info) {
      // console.log('mapInfo', info);
      this.$set(this.form, 'address', info.address)
      this.$set(this.form, 'longitude', info.lng)
      this.$set(this.form, 'latitude', info.lat)
    }
  }
}
</script>
